<ui:composition template="/WEB-INF/layout.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">
        <h:form id="form">  

            <p:growl id="msgs" showDetail="true" />  

            <p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">  

                <p:column headerText="Model" style="width:24%">  
                    <h:outputText value="#{car.model}" />  
                </p:column>  

                <p:column headerText="Year" style="width:24%">  
                    <h:outputText value="#{car.year}" />  
                </p:column>  

                <p:column headerText="Manufacturer" style="width:24%">  
                    <h:outputText value="#{car.manufacturer}" />  
                </p:column>  

                <p:column headerText="Color" style="width:24%">  
                    <h:outputText value="#{car.color}" />  
                </p:column>  

                <p:column style="width:4%">  
                    <p:commandButton id="selectButton" update=":form:display" oncomplete="PF('carDialog').show()" icon="ui-icon-search" title="View">  
                        <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />  
                    </p:commandButton>  
                </p:column>  

            </p:dataTable>  

            <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"  
                      showEffect="fade" hideEffect="explode" modal="true">  

                <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  

                    <f:facet name="header">  
                        <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>  
                    </f:facet>  

                    <h:outputText value="Model:" />  
                    <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>  

                    <h:outputText value="Year:" />  
                    <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>  


                    <h:outputText value="Manufacturer:" />  
                    <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>  

                    <h:outputText value="Color:" />  
                    <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>  

                </h:panelGrid>  

            </p:dialog>  

        </h:form>  
    </ui:define>
</ui:composition>